<template>
  <view
    class="bg-gradient-to-br from-[#4caf50] to-[#2e7d32] p-[40rpx] box-border text-white text-center shadow-lg mb-[40rpx]">
    <view class="flex justify-center items-center mb-[60rpx]">
      <text class="text-[44rpx] font-bold">电子健康卡</text>
    </view>
    <view class="w-[450rpx] h-[450rpx] bg-white mx-auto mb-[60rpx] flex items-center justify-center relative">
      <CodeImg :code="code" v-if="code" />
    </view>
    <view class="bg-white bg-opacity-15 p-[30rpx] rounded-[24rpx] mt-[40rpx]">
      <view class="flex justify-between py-[16rpx] border-b border-white border-opacity-20">
        <text class="font-bold">姓名:</text>
        <text>{{ user.name }}</text>
      </view>
      <view class="flex justify-between py-[16rpx] border-b border-white border-opacity-20">
        <text class="font-bold">身份证号:</text>
        <text>{{ user.idcard }}</text>
      </view>
    </view>
  </view>
  <view class="p-[40rpx] box-border">
    <view
      class="bg-[#e8f5e9] border-l-4 border-[#4caf50] p-[30rpx] rounded-r-[16rpx] mb-[40rpx] text-[28rpx] text-[#2e7d32]">
      <text>电子健康卡可在全国医疗机构使用，实现跨机构、跨区域就医一卡通。</text>
    </view>
    <nut-button type="primary" block size="large"
      class="h-[88rpx] text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32] mt-[40rpx]" @click="$emit('reapply')">
      <template #icon>
        <IconFont name="edit" class="mr-[10rpx]" />
      </template>
      <text>重新申请</text>
    </nut-button>
  </view>

</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
import CodeImg from './code-img.vue'
const props = defineProps<{
  code: string
  user: {
    name: string
    idcard: string
  }
}>()
</script>